<template>
  <div class="Mac">
    <!-- 立即选购(链接) -->
    <div class="choose_link">
      <p>
        为高校生活购买 Mac,以 Apple 教育优惠节省更多，另有 AirPods 搭配其中。
      </p>
      <router-link to="/shoppingcart">立即选购</router-link>
    </div>
    <!-- 新款海报(白底) -->
    <div class="new_poster">
      <div>新款</div>
      <div>MacBook Air</div>
      <div>别看轻，别轻看。</div>
      <h6>RMB 9499 起</h6>
      <div class="purchase">
        <router-link  class="btn" to="/macbookAir-M2">购买</router-link><br>
        <router-link to="/macbookAir-M2">进一步了解</router-link>
      </div>
      <div>
        <img src="../assets/SLF_IMG/36.jpg" alt="" />
      </div>
    </div>
    <!-- 新款海报(黑底) -->
    <div class="new_poster new_poster2">
      <div>新款</div>
      <div>13 英寸 MacBook Pro</div>
      <div>超机动，硬实力。</div>
      <h6>RMB 9999 起</h6>
      <div class="purchase">
        <router-link  class="btn" to="/macpro-13">购买</router-link><br>
        <router-link to="/macpro-13">进一步了解</router-link>
      </div>
      <div>
        <img src="../assets/SLF_IMG/37.jpg" alt="" />
      </div>
    </div>
    <!-- 机型比较 -->
    <div class="compare">
      <div class="content">
        <h2>哪款 Mac 适合你？</h2>
        <div class="box">
          <!--机型比较 上-->
          <div class="box_top">
            <div class="list">
              <ul>
                <li>笔记本电脑</li>
              </ul>
            </div>
          </div>
          <!--机型比较 中-->
          <div class="box_center">
            <div class="item">
              <ul>
                <li>
                  <a href=""> <img src="../assets/SLF_IMG/32.png" alt="" /></a>
                  <img src="../assets/SLF_IMG/38.png" alt="" />
                  <H4>MacBook Air</H4>
                  <p>(M1 芯片机型)</p>
                  <span>RMB 7999 起</span>
                  <router-link  class="btn" to="/macbookAir-M1">购买</router-link><br>
                  <router-link to="/macbookAir-M1">进一步了解</router-link>
                </li>
                <li>
                  <div class="d1">
                    <h4>13.3 英寸</h4>
                    <p>视网膜显示屏1</p>
                  </div>
                  <div class="d2">
                    <img src="../assets/SLF_IMG/1.png" alt="" />
                    <p>Apple M1 芯片</p>
                  </div>
                  <div class="d3">
                    <p>&nbsp;</p>
                    <h4>8 核</h4>
                    <p>中央处理器</p>
                  </div>
                  <div class="d4">
                    <p>&nbsp;</p>
                    <h4>7 核</h4>
                    <p>图形处理器</p>
                  </div>
                  <div class="d5">
                    <img src="../assets/SLF_IMG/4.png" alt="" />
                    <p>最高可选配 16GB 统一内存</p>
                  </div>
                  <div class="d6">
                    <p>最高可选配</p>
                    <h4>2TB</h4>
                    <p>存储容量2</p>
                  </div>
                  <div class="d7">
                    <img src="../assets/SLF_IMG/5.png" alt="" />
                    <p>电池续航最长达 18 小时3</p>
                  </div>
                  <div class="d8">
                    <img src="../assets/SLF_IMG/6.png" alt="" />
                    <p>720p FaceTime 高清摄像头</p>
                  </div>
                  <div class="d9">
                    <img src="../assets/SLF_IMG/7.png" alt="" />
                    <p>三麦克风阵列<br />立体声扬声器</p>
                  </div>
                  <div class="d10">
                    <h4>1.29 千克</h4>
                    <p>重量</p>
                  </div>
                  <div class="d11">
                    <img src="../assets/SLF_IMG/8.png" alt="" />
                    <p>触控 ID</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li>
                  <a href="">
                    <img src="../assets/SLF_IMG/33.png" alt="" />
                  </a>
                  <img src="../assets/SLF_IMG/39.png" alt="" />
                  <H4>MacBook Air</H4>
                  <p>(M2 芯片机型)</p>
                  <span>RMB 9499 起</span>
                  <router-link  class="btn" to="/macbookAir-M2">购买</router-link><br>
                  <router-link to="/macbookAir-M2">进一步了解</router-link>
                </li>
                <li>
                  <div class="d1">
                    <h4>13.6 英寸</h4>
                    <p>Liquid 视网膜显示屏1</p>
                  </div>
                  <div class="d2">
                    <img src="../assets/SLF_IMG/2.png" alt="" />
                    <p>Apple M2 芯片</p>
                  </div>
                  <div class="d3">
                    <p>&nbsp;</p>
                    IMG
                    <h4>8 核</h4>
                    <p>中央处理器</p>
                  </div>
                  <div class="d4">
                    <p>最高可选配</p>
                    <h4>10 核</h4>
                    <p>图形处理器</p>
                  </div>
                  <div class="d5">
                    <img src="../assets/SLF_IMG/4.png" alt="" />
                    <p>最高可选配 24GB 统一内存</p>
                  </div>
                  <div class="d6">
                    <p>最高可选配</p>
                    <h4>2TB</h4>
                    <p>存储容量2</p>
                  </div>
                  <div class="d7">
                    <img src="../assets/SLF_IMG/5.png" alt="" />
                    <p>电池续航最长达 18 小时3</p>
                  </div>
                  <div class="d8">
                    <img src="../assets/SLF_IMG/6.png" alt="" />
                    <p>1080p FaceTime 高清摄像头</p>
                  </div>
                  <div class="d9">
                    <img src="../assets/SLF_IMG/7.png" alt="" />
                    <p>三麦克风阵列<br />支持空间音频的四扬声器系统</p>
                  </div>
                  <div class="d10">
                    <h4>1.24 千克</h4>
                    <p>重量</p>
                  </div>
                  <div class="d11">
                    <img src="../assets/SLF_IMG/8.png" alt="" />
                    <p>触控 ID</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li>
                  <a href="">
                    <img src="../assets/SLF_IMG/34.png" alt="" />
                  </a>
                  <img src="../assets/SLF_IMG/40.png" alt="" />
                  <H4>MacBook Air</H4>
                  <p class="p3">13 英寸</p>
                  <span>RMB 9999 起</span>
                  <router-link  class="btn" to="/macpro-13">购买</router-link><br>
                  <router-link to="/macpro-13">进一步了解</router-link>
                </li>
                <li>
                  <div class="d1">
                    <h4>13.3 英寸</h4>
                    <p>视网膜显示屏1</p>
                  </div>
                  <div class="d2">
                    <img src="../assets/SLF_IMG/2.png" alt="" />
                    <p>Apple M2 芯片</p>
                  </div>
                  <div class="d3">
                    <p>&nbsp;</p>
                    <h4>8 核</h4>
                    <p>中央处理器</p>
                  </div>
                  <div class="d4">
                    <p>&nbsp;</p>
                    <h4>10 核</h4>
                    <p>图形处理器</p>
                  </div>
                  <div class="d5">
                    <img src="../assets/SLF_IMG/4.png" alt="" />
                    <p>最高可选配 24GB 统一内存</p>
                  </div>
                  <div class="d6">
                    <p>最高可选配</p>
                    <h4>2TB</h4>
                    <p>存储容量2</p>
                  </div>
                  <div class="d7">
                    <img src="../assets/SLF_IMG/5.png" alt="" />
                    <p>电池续航最长达 20 小时3</p>
                  </div>
                  <div class="d8">
                    <img src="../assets/SLF_IMG/6.png" alt="" />
                    <p>720p FaceTime 高清摄像头</p>
                  </div>
                  <div class="d9">
                    <img src="../assets/SLF_IMG/7.png" alt="" />
                    <p>录音棚级三麦克风阵列<br />支持空间音频的立体声扬声器</p>
                  </div>
                  <div class="d10">
                    <h4>1.38 千克</h4>
                    <p>重量</p>
                  </div>
                  <div class="d11">
                    <img src="../assets/SLF_IMG/41.png" alt="" />
                    <p>触控 ID</p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="item">
              <ul>
                <li>
                  <a href="">
                    <img src="../assets/SLF_IMG/32.png" alt="" />
                  </a>
                  <img src="../assets/SLF_IMG/38.png" alt="" />
                  <H4>MacBook Air</H4>
                  <p class="p4">14 英寸和 16 英寸</p>
                  <span>RMB 14999 起</span>
                  <router-link  class="btn" to="/macpro-14">购买</router-link><br>
                  <router-link to="/macpro-14">进一步了解</router-link>
                </li>
                <li>
                  <div class="d1">
                    <h4>14.2 英寸或 16.2 英寸</h4>
                    <p>Liquid 视网膜 XDR 显示屏1</p>
                  </div>
                  <div class="d2">
                    <img src="../assets/SLF_IMG/3.png" alt="" />
                    <p>
                      Apple M1 Pro 芯片或<br />
                      Apple M1 Max 芯片
                    </p>
                  </div>
                  <div class="d3">
                    <p>最高可选配</p>
                    <h4>10 核</h4>
                    <p>中央处理器</p>
                  </div>
                  <div class="d4">
                    <p>最高可选配</p>
                    <h4>32 核</h4>
                    <p>图形处理器</p>
                  </div>
                  <div class="d5">
                    <img src="../assets/SLF_IMG/4.png" alt="" />
                    <p>最高可选配 64GB 统一内存</p>
                  </div>
                  <div class="d6">
                    <p>最高可选配</p>
                    <h4>8TB</h4>
                    <p>存储容量2</p>
                  </div>
                  <div class="d7">
                    <img src="../assets/SLF_IMG/5.png" alt="" />
                    <p>电池续航最长达 21 小时3</p>
                  </div>
                  <div class="d8">
                    <img src="../assets/SLF_IMG/6.png" alt="" />
                    <p>1080 p FaceTime 高清摄像头</p>
                  </div>
                  <div class="d9">
                    <img src="../assets/SLF_IMG/7.png" alt="" />
                    <p>录音棚级三麦克风阵列<br />支持空间音频的六扬声器系统</p>
                  </div>
                  <div class="d10">
                    <h4>1.6 千克或 2.1 千克</h4>
                    <p>重量</p>
                  </div>
                  <div class="d11">
                    <img src="../assets/SLF_IMG/8.png" alt="" />
                    <p>触控 ID</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!--机型比较 下-->
          <div class="box_bottom">
            <!-- <a href="">比较各款 Mac 机型&nbsp;></a> -->
            <router-link to="/shoppingcart">选购 Mac</router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 立即选购(图片) -->
    <div class="choose_img">
      <div class="choose_mac1">
        <div class="text">
          <div class="left">
            <p>为高校生活添装备</p>
            <h4>以教育优惠购买 Mac 可省更多</h4>
            <span>另有 AirPods 搭配其中</span>
            <!-- <a href="">立即选购></a> -->
          </div>
        </div>
        <div class="pic"></div>
      </div>
      <div class="choose_mac2">
        <div class="box">
          <div class="left">
            <p>配件</p>
            <h3>探索 Mac 的精彩配件</h3>
            <router-link to="/shoppingcart">选购</router-link>
            <img src="../assets/SLF_IMG/10.jpg" alt="" />
          </div>
          <div class="right">
            <h2>Apple Trade In 换购计划</h2>
            <h3>
              换购新 Mac,<br />
              享受折抵优惠。
            </h3>
            <p>
              你可用符合条件的电脑来获得折抵优惠,也可选择免费回收处理。<br />
              这样一来,你受益,地球也受益
            </p>
            <!-- <a href="">了解你设备的折抵金额 &nbsp;></a> -->
            <img src="../assets/SLF_IMG/11.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 电脑参数 -->
    <div class="parameters"></div>
    <!-- 分期 送货 帮助 -->
    <div class="by_stages">
      <div class="stages1">
        <img src="../assets/SLF_IMG/12.png" alt="" />
        <h3>分期付款</h3>
        <p>
          符合条件的用户可选择<br />
          灵活的分期付款方式。
        </p>
        <!-- <a href="">进一步了解</a> -->
      </div>
      <div class="stages1">
        <img src="../assets/SLF_IMG/12.png" alt="" />
        <h3>分期付款</h3>
        <p>
          符合条件的用户可选择<br />
          灵活的分期付款方式。
        </p>
        <!-- <a href="">进一步了解</a> -->
      </div>
      <div class="stages1">
        <img src="../assets/SLF_IMG/12.png" alt="" />
        <h3>分期付款</h3>
        <p>
          符合条件的用户可选择<br />
          灵活的分期付款方式。
        </p>
        <!-- <a href="">进一步了解</a> -->
      </div>
    </div>
    <!-- 进一步了解 先睹为快-->
    <div class="understand">
      <div class="box">
        <div class="box_top">为什么 Mac 就是那么不一样？</div>
        <div class="box_center">
          <ul>
            <li>
              <p>选 Mac 的理由</p>
              <h3>超强,超好用。</h3>
              <!-- <a href="">进一步了解</a> -->
              <img src="../assets/SLF_IMG/15.jpg" alt="" />
            </li>
            <li>
              <p>连续互通</p>
              <h3>
                在你不同设备之间,<br />
                体验无间。
              </h3>
              <!-- <a href="">进一步了解</a> -->
              <img src="../assets/SLF_IMG/16.jpg" alt="" />
            </li>
          </ul>
        </div>
        <div class="box_bottom">
          <div class="left">
            <div class="text">
              <p>macOS Ventura</p>
              <h3>
                更高效,更尽兴，<br />
                更跨界
              </h3>
              <!-- <a href="">先睹为快></a> -->
            </div>
          </div>
          <div class="right">
            <img src="../assets/SLF_IMG/17.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
    <!-- 专业APP 内置APP -->
    <div class="professional">
      <div class="box" v-if="data">
        <div class="box1">
          <h3>内置 App</h3>
          <p>
            每台 Mac 都内置了众多激发创意、提升效率的
            app,帮助你去探索、交流、高效工作。
          </p>
          <ul>
            <li
              @click="now = index"
              v-for="(item, index) in data.macindex1"
              :key="item.id"
              :class="{ active: now == index }"
            >
              <img :src="item.img" alt="" />
              <p>{{item.p_text}}</p>
            </li>
          </ul>
          <p>{{data.macindex1[now].text}}</p>
          <!-- <a href="">进一步了解 Safari 浏览器</a> -->
          <div class="img">
            <img :src="data.macindex1[now].img_s" alt="" />
          </div>
        </div>
        <div class="box1">
          <h3>专业 App</h3>
          <p>
            每台 Mac 都内置了众多激发创意、提升效率的
            app,帮助你去探索、交流、高效工作。
          </p>
          <ul class="uu">
            <li
              @click="now2 = index"
              v-for="(item, index) in data.macindex2"
              :key="item.id"
              :class="{ active: now2 == index }"
            >
              <img :src="item.img" alt="" />
              <p>{{ item.p_text }}</p>
            </li>
          </ul>
          <p>{{ data.macindex2[now2].text }}</p>
          <!-- <a href="">进一步了解 Safari 浏览器</a> -->
          <div class="imgg">
            <img :src="data.macindex2[now2].img_s" alt="" />
          </div>
        </div>

        <div class="appstore">
          <div class="left"></div>
          <div class="right">
            <p>
              Mac App Store 备有精心编辑的丰富内容，以及面向 Mac 的精彩 app。
            </p>
            <a href="">探索 Mac App Store</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 在线课程 APP与教育 Apple at Work-->
    <div class="courses">
      <div class="box">
        <div class="box_top">
          <div class="left">
            <div class="text">
              <p>Today at Apple</p>
              <h3>实时在线课程</h3>
              <p>Mac 基础入门,跟着我们学起来。</p>
              <router-link to="/register">注册</router-link>
            </div>
          </div>
          <div class="right"></div>
        </div>
        <div class="box_center">
          <div class="text">
            <h3>Apple at Work</h3>
            <p>以强大装备，助你业务更上一层楼。</p>
            <a href="">了解 Apple at Work</a><br />
            <a href="">看看商务选 Mac 的理由</a>
          </div>
        </div>
        <div class="box_bottom">
          <div class="text">
            <h3>Apple 与教育</h3>
            <p>为教育工作者和学生提供支持，给他们推动世界前行的力量。</p>
            <a href="">进一步了解 Apple 与教育</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: 0,
      now2:0,
      data: null,
    };
  },

  mounted() {
    this.getData();
  },

  methods: {
    getData() {
      var url = "http://localhost:3000/macindex";
      axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
};
</script>

<style  scoped src="../assets/css/mac.css">
</style>